<template>
  <div class="setmonth">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="ruleForm.date"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="月">
        <el-select v-model="value" clearable placeholder="请选择月份">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="天">
        <el-select v-model="value" clearable placeholder="请选择天数">
          <el-option
            v-for="item in Dayoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="是否立即执行">
        <!-- `checked` 为 true 或 false -->
        <el-checkbox v-model="checked"></el-checkbox>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data: () => ({
    ruleForm: {
      date: "", //日期
    },
    //月份下拉框
    options: [
      {
        value: "一月",
        label: "一月",
      },
      {
        value: "二月",
        label: "二月",
      },
      {
        value: "三月",
        label: "三月",
      },
      {
        value: "四月",
        label: "四月",
      },
      {
        value: "五月",
        label: "五月",
      },
      {
        value: "六月",
        label: "六月",
      },
      {
        value: "七月",
        label: "七月",
      },
      {
        value: "八月",
        label: "八月",
      },
      {
        value: "九月",
        label: "九月",
      },
      {
        value: "十月",
        label: "十月",
      },
      {
        value: "十一月",
        label: "十一月",
      },
      {
        value: "十二月",
        label: "十二月",
      },
    ],
    //天数下拉框
    Dayoptions: [
      {
        value: "1",
        label: "1",
      },
      {
        value: "2",
        label: "2",
      },
      {
        value: "3",
        label: "3",
      },
      {
        value: "4",
        label: "4",
      },
      {
        value: "5",
        label: "5",
      },
      {
        value: "6",
        label: "6",
      },
      {
        value: "7",
        label: "7",
      },
      {
        value: "8",
        label: "8",
      },
      {
        value: "9",
        label: "9",
      },
      {
        value: "10",
        label: "10",
      },
      {
        value: "11",
        label: "11",
      },
      {
        value: "12",
        label: "12",
      },
      {
        value: "13",
        label: "13",
      },
      {
        value: "14",
        label: "14",
      },
      {
        value: "15",
        label: "15",
      },
      {
        value: "16",
        label: "16",
      },
      {
        value: "17",
        label: "17",
      },
      {
        value: "18",
        label: "18",
      },
      {
        value: "19",
        label: "19",
      },
      {
        value: "20",
        label: "20",
      },
      {
        value: "21",
        label: "21",
      },
      {
        value: "22",
        label: "22",
      },
      {
        value: "23",
        label: "23",
      },
      {
        value: "24",
        label: "24",
      },
      {
        value: "25",
        label: "25",
      },
      {
        value: "26",
        label: "26",
      },
      {
        value: "27",
        label: "27",
      },
      {
        value: "28",
        label: "28",
      },
      {
        value: "29",
        label: "29",
      },
      {
        value: "30",
        label: "30",
      },
      {
        value: "31",
        label: "31",
      },
    ],
    //数值
    num: 1, //时间间隔
    value: "", //月份下拉框
    //布尔值
    checked: true,
  }),
  props: ["HzDate"],
  created() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.setmonth {
  .el-form-item {
    margin-bottom: 20px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
  }
  .el-form-item:nth-child(4) {
    margin-left: 20px;
  }
}
</style>